<template>
		<view class="newboxtow flex" :key="item.id" @click="choose(item)"> 
			<view class="newboxtow_item u-m-t-20">
				<view class="avatar_box">
					<!-- <view class="newRen" v-if="item.isnew">
						<image src="../../static/newPeople.png" mode="aspectFill"></image>
					</view>
					
					<view class="hg u-font-26" v-if="item.iscrown">
						<image src="../../static/hg.png" mode="aspectFill"></image>
					</view>
					
					<view class="huo u-font-26" v-if="item.isfire">
						<image src="../../static/huo.png" mode="aspectFill"></image>
					</view>
					
					<view class="zan u-font-26" v-if="item.isgood">
						<image src="../../static/zan.png" mode="aspectFill"></image>
					</view> -->
					<u--image class="avatar" radius=10 :src="oss(item.work_image)" width="300rpx" height="300rpx"></u--image>
					<text class="morepic" @click.stop="preimg(item.images,$event)">
						更多照片
					</text>
					<template v-if="select">
						<view class="select circle" v-if="ids!=item.user_id"></view>
						<image class="select" v-else src="/static/selected.png" mode="widthFix"></image>
					</template>
				</view>
				<view class="jsname flex u-m-t-20">
					<text class="name">{{item.name}}</text>
					<image class="starimg u-m-lr-20" src="../../static/pages_technician/starb.png" mode=""></image>
					<text class="sorce">{{item.score > 0 ? item.score : '5.0'}}</text>
				</view>
				<view class="newbox_right_top_right flex u-m-t-10"  v-if="item.is_rest == 1">
					<view class="timetitle">
						<text class="word">忙碌中</text>
					</view>
					<view class="time">
						<text class="word">不可约</text>
					</view>
					
				</view>
				<view class="newbox_right_top_right flex u-m-t-10" v-else>
					<view class="timetitle">
						<text class="word">最早可约</text>
					</view>
					<view class="time" v-if="item.timeInfo">
						<text class="word">{{changetime(item.timeInfo.starttime)}}</text>
					</view>
				</view>
				<view class="newbox_right_bottom_left_one flex u-m-t-10" >
					<image class="shopimg u-m-r-10" src="../../static/pages_technician/shop.png" mode=""></image>
					
					<text v-if="item.shopnames" @click.stop="toshop(item,$event)" class="shopname">{{item.shopnames.substring(0,6)}}</text>
					<text v-else @click.stop="tocert(item,$event)" class="shopname">{{item.shopintro}}</text>
					
					<text class="u-m-lr-10"> · </text>
					<text class="shopname">{{Number(item.juli).toFixed(2)}}km</text>
				</view>
				<view class="newbox_right_bottom_left_two flex u-m-t-10">
					<text class="had">已服务{{item.sale}}单</text>
					<view class="flex numBox" style="flex-direction: row; align-items: center;">
						<image class="comments " src="../../static/pages_technician/comment.png" mode=""></image>
						<text class="u-m-l-10 numword">{{item.commentNum}}</text>
					</view>
					<view class="flex numBox" style="flex-direction: row; align-items: center;" >
						<image class="xins " src="../../static/pages_technician/love.png" mode=""></image>
						<text class="u-m-l-10 numword">{{item.collectNum}}</text>
					</view>
					
				</view>
			</view>
		</view>
</template>

<script>
	import configs from '@/common/config.js'
	export default {
		props: ['item', 'select', 'ids','userplus'],
		name:'newskillbox',
		data() {
			return {};
		},
		methods: {
			tocert(item,e){
				console.log(item)
				this.$goTo('/pages_technician/jsDetails/cert?card=' + item.card + '&skill_image=' + item.skill_image + '&health_image=' + item.health_image + '&business_image=' + item.business_image + '&shopname=' + item.shopname)
			},
			selectServe(item){
				this.$emit('popOut', item.user_id)
			},
			oss(url) {
				if (!url) {
					url = this.$store.state.config.user_logo_image
				}
				if (typeof url === 'string') {
					if ((/^(http|https):\/\/.+/.test(url))) {
						return url
					} else {
						return configs.imgUrl + url
					}
				} else {
					let arr = []
					for (let i = 0; i < url.length; i++) {
						if ((/^(http|https):\/\/.+/.test(url[i]))) {
							arr.push(url[i])
						} else {
							arr.push(configs.imgUrl + url[i])
						}
					}
					return arr
				}
			},
			//时间戳转化
			changetime(value){
				var now = new Date(value*1000);
				var year = now.getFullYear();
				var month = now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : (now.getMonth() + 1);
				var day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate();
				var hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
				var minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
				var second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();
				let data = {
					year,
					month,
					day,
					hour,
					minute,
					second,
					time: hour + ':' + minute 
				}
				return data.time;
			},
			preimg(url,e) {
				console.log(url,e,this.userplus)
				let arr =[]
				url.map(item=>{
					item = this.oss(item)
					arr.push(item)
				})
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
				// if(this.userplus === 1){
				// 	let arr =[]
				// 	url.map(item=>{
				// 		item = this.oss(item)
				// 		arr.push(item)
				// 	})
				// 	uni.previewImage({
				// 		urls: arr,
				// 		longPressActions: {
				// 			itemList: ['发送给朋友', '保存图片', '收藏'],
				// 			success: function(data) {
				// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				// 			},
				// 			fail: function(err) {
				// 				console.log(err.errMsg);
				// 			}
				// 		}
				// 	});
				// 	// #ifdef APP-NVUE
				// 	e.stopPropagation()
				// 	// #endif
				// }else if(this.userplus === 0){
				// 	this.$toast('请先开通会员~')
				// }else if(this.userplus === ''){
				// 	this.$toast('请先开通会员~')
				// }
				
			},
			choose(item) {
				this.$emit('choose', item.user_id)
				this.$emit('detail', item.id)
			},
			toshop(id,e) {
				uni.navigateTo({
					url: '/pages_technician/shopdetail/shopdetail?store_id=' + id.store_id
				})
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			},
			oss(url) {
				if (!url) {
					url = this.$store.state.config.user_logo_image
				}
				if (typeof url === 'string') {
					if ((/^(http|https):\/\/.+/.test(url))) {
						return url
					} else {
						return configs.imgUrl + url
					}
				} else {
					let arr = []
					for (let i = 0; i < url.length; i++) {
						if ((/^(http|https):\/\/.+/.test(url[i]))) {
							arr.push(url[i])
						} else {
							arr.push(configs.imgUrl + url[i])
						}
					}
					return arr
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-m-t-10{
		margin-top: 10rpx;
	}
	.u-font-26{
		font-size: 26rpx;
	}
	.u-m-r-10{
		margin-right: 10rpx;
	}
	.u-m-t-20{
		margin-top: 20rpx;
	}
	.u-m-l-10{
		margin-left: 10rpx;
	}
	.flex-cneter{
		justify-content: center;
		align-items: center;
	}
	.u-m-l-5{
		margin-left: 5rpx;
	}
	.u-m-t-5{
		margin-top: 5rpx;
	}
	.u-m-l-20{
		margin-right: 20rpx;
	}
	.white{
		color: #fff;
	}
	.newboxtow{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		.newboxtow_item{
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			.avatar_box{
				position: relative;
				.avatar{
					border-radius: 20rpx;
					background-color: #fff;
				}
				.morepic{
					position: absolute;
					color: #fff;
					border-radius: 10rpx;
					text-align: center;
					padding: 5rpx 10rpx;
					background-color: #00CE9B;
					font-size: 26rpx;
					bottom: 10rpx;
					right: 10rpx;
				}
				.select {
					width: 32rpx;
					height: 32rpx;
					margin: 0;
					position: absolute;
					right: 30rpx;
					top: 20rpx;
				}
				
				.newRen {
					position: absolute;
					top: 2rpx;
					z-index: 99;
					width: 100rpx;
					height: 100rpx;
					image {
						width: 100rpx;
						height: 100rpx;
					}
				}
				.hg {
					position: absolute;
					top: 2rpx;
					z-index: 99;
					width: 100rpx;
					height: 100rpx;
					image {
						width: 55rpx;
						height: 55rpx;
					}
				}
				.huo {
					position: absolute;
					top: 2rpx;
					z-index: 99;
					width: 100rpx;
					height: 100rpx;
					image {
						width: 38rpx;
						height: 38rpx;
					}
				}
				
				.zan {
					position: absolute;
					top: 2rpx;
					z-index: 99;
					width: 100rpx;
					height: 100rpx;
					image {
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
			.jsname{
				flex-direction: row;
				align-items: baseline;
				.name{
					font-weight: bold;
					font-size: 32rpx;
				}
				.starimg{
					width: 26rpx;
					height: 26rpx;
				}
				.sorce{
					color: #FABE49;
					font-size: 26rpx;
				}
			}
			.newbox_right_top_right{
				flex-direction: row;
				font-size: 26rpx;
				color: #00CE9B;
				.timetitle{
					background: #C8F5E9;
					padding:  10rpx;
					border-radius: 10rpx 0 0 10rpx;
					
					.word{
						font-size: 22rpx;
						color: #00CE9B;
					}
				}
				.time{
					background: rgba(0,206,155,0.08);
					padding:  10rpx;
					border-radius:  0 10rpx  10rpx 0;
					.word{
						font-size: 22rpx;
						color: #00CE9B;
					}
				}
			}
			.newbox_right_bottom_left_one{
				color: #999;
				flex-direction: row;
				font-size: 26rpx;
				align-items: center;
				.shopimg{
					width: 28rpx;
					height: 28rpx;
				}
				.shopname{
					color: #999999;
					font-size: 22rpx;
				}
			}
			.newbox_right_bottom_left_two{
				justify-content: space-between;
				// width: 280rpx;
				flex-direction: row;
				font-size: 24rpx;
				color: #999;
				align-items: center;
				.had{
					color: #666666;
					font-size: 22rpx;
				}
				.comments{
					width: 24rpx;
					height: 24rpx;
				}
				.xins{
					width: 24rpx;
					height: 24rpx;
				}
				.numBox{
					
				}
				.numword{
					color: #999999;
					font-size: 22rpx;
				}
			}
		}
		
	}
</style>